<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的订单 - 废物回收管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .order-container {
            max-width: 1200px;
            margin: 2rem auto;
        }
        .order-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s;
            margin-bottom: 1.5rem;
            padding: 1.5rem;
        }
        .order-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .card-body {
            padding: 0;
        }
        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .timeline {
            position: relative;
            padding-left: 2.5rem;
            margin: 1rem 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 0.75rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e9ecef;
        }
        .timeline-item {
            position: relative;
            padding-bottom: 1.5rem;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -1.75rem;
            top: 0.25rem;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: white;
            border: 2px solid #0d6efd;
        }
        .timeline-item.completed::before {
            background: #0d6efd;
        }
        .status-badge {
            font-size: 0.9rem;
            padding: 0.5rem 1.2rem;
            border-radius: 20px;
            font-weight: 500;
            display: inline-block;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }
        .status-processing {
            background-color: #cce5ff;
            color: #004085;
            border: 1px solid #b8daff;
        }
        .status-completed {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status-cancelled {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .filter-btn {
            border-radius: 20px;
            padding: 0.5rem 1.5rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            border: 2px solid transparent;
        }
        .filter-btn.active {
            border-color: #0d6efd;
            background-color: #e7f1ff;
        }
        .search-box {
            border-radius: 25px;
            padding-left: 1rem;
            padding-right: 1rem;
            border: 2px solid #e9ecef;
        }
        .search-box:focus {
            border-color: #0d6efd;
            box-shadow: none;
        }
        .empty-state {
            text-align: center;
            padding: 3rem;
        }
        .empty-state i {
            font-size: 4rem;
            color: #dee2e6;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/resident">
                <i class="fas fa-recycle me-2"></i>废物回收管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/resident">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders/create">预约回收</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/orders/list">我的订单</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container order-container">
        <!-- 搜索和筛选 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <input type="text" class="form-control search-box" placeholder="搜索订单号、地址..." id="searchInput">
            </div>
            <div class="col-md-6 text-md-end">
                <a href="/orders/create" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>新建预约
                </a>
            </div>
        </div>

        <!-- 状态筛选 -->
        <div class="mb-4">
            <button class="btn filter-btn active" data-status="all">全部</button>
            <button class="btn filter-btn" data-status="PENDING">待处理</button>
            <button class="btn filter-btn" data-status="PROCESSING">处理中</button>
            <button class="btn filter-btn" data-status="COMPLETED">已完成</button>
            <button class="btn filter-btn" data-status="CANCELLED">已取消</button>
        </div>

        <!-- 订单列表 -->
        <div id="orderList">
            <div th:if="${#lists.isEmpty(orders)}" class="empty-state">
                <i class="fas fa-inbox"></i>
                <h4>暂无订单</h4>
                <p class="text-muted">您还没有创建任何回收订单</p>
                <a href="/orders/create" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>立即预约
                </a>
            </div>
            
            <!-- 订单卡片 -->
            <div class="order-card" th:each="order : ${orders}" th:data-status="${order.status}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h5 class="card-title mb-1" th:text="${'订单号：' + order.orderNo}">订单号：2024030100001</h5>
                            <p class="text-muted mb-2">
                                <i class="fas fa-calendar-alt me-2"></i>
                                <span th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}">2024-03-01 10:00</span>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                <span th:text="${order.address}">回收地址</span>
                            </p>
                            <p class="mb-0">
                                <i class="fas fa-box me-2"></i>
                                <span th:text="${order.itemType == 'RECYCLABLE' ? '可回收物' : 
                                              order.itemType == 'HAZARDOUS' ? '有害垃圾' : 
                                              order.itemType == 'FOOD' ? '厨余垃圾' : '其他垃圾'}">废品类型</span>
                                <span class="text-muted ms-2" th:text="${order.estimatedWeight + 'kg'}">预估重量</span>
                            </p>
                        </div>
                        <div class="col-md-3">
                            <div class="timeline">
                                <div class="timeline-item completed">
                                    <p class="mb-0">订单创建</p>
                                    <small class="text-muted" th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</small>
                                </div>
                                <div class="timeline-item" th:classappend="${order.status == 'PROCESSING' ? 'completed' : ''}">
                                    <p class="mb-0">回收员接单</p>
                                    <small class="text-muted" th:text="${order.collectorId != null ? #temporals.format(order.updateTime, 'yyyy-MM-dd HH:mm') : '等待接单'}">接单时间</small>
                                </div>
                                <div class="timeline-item" th:classappend="${order.status == 'COMPLETED' ? 'completed' : ''}">
                                    <p class="mb-0">完成回收</p>
                                    <small class="text-muted" th:text="${order.status == 'COMPLETED' ? #temporals.format(order.updateTime, 'yyyy-MM-dd HH:mm') : '待完成'}">完成时间</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 text-md-end">
                            <span class="status-badge" 
                                  th:data-status="${order.status}"
                                  th:classappend="${order.status == 'PENDING' ? 'status-pending' : 
                                                  order.status == 'PROCESSING' ? 'status-processing' : 
                                                  order.status == 'COMPLETED' ? 'status-completed' : 
                                                  order.status == 'CANCELLED' ? 'status-cancelled' : ''}"
                                  th:text="${order.status == 'PENDING' ? '待处理' : 
                                           order.status == 'PROCESSING' ? '处理中' : 
                                           order.status == 'COMPLETED' ? '已完成' : 
                                           order.status == 'CANCELLED' ? '已取消' : order.status}">状态</span>
                            
                            <!-- 评价按钮 -->
                            <div class="mt-3" th:if="${order.status == 'COMPLETED' && order.rating == null}">
                                <button class="btn btn-outline-primary btn-sm" 
                                        onclick="showRatingModal(this)"
                                        th:data-order-id="${order.id}">
                                    <i class="fas fa-star me-1"></i>评价
                                </button>
                            </div>
                            
                            <!-- 评分显示 -->
                            <div class="mt-2" th:if="${order.rating != null}">
                                <div class="text-warning">
                                    <i class="fas fa-star" th:each="i : ${#numbers.sequence(1, order.rating)}"></i>
                                </div>
                                <small class="text-muted" th:text="${order.comment}">评价内容</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 评价模态框 -->
        <div class="modal" id="ratingModal" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">评价订单</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="ratingForm">
                            <input type="hidden" id="orderId" name="orderId">
                            <div class="mb-3">
                                <label class="form-label">服务评分</label>
                                <div class="rating">
                                    <i class="far fa-star" data-rating="1"></i>
                                    <i class="far fa-star" data-rating="2"></i>
                                    <i class="far fa-star" data-rating="3"></i>
                                    <i class="far fa-star" data-rating="4"></i>
                                    <i class="far fa-star" data-rating="5"></i>
                                </div>
                                <input type="hidden" id="rating" name="rating" required>
                            </div>
                            <div class="mb-3">
                                <label for="comment" class="form-label">评价内容</label>
                                <textarea class="form-control" id="comment" name="comment" rows="3" required></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="submitRating()">提交评价</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <nav aria-label="Page navigation" class="mt-4" th:if="${totalPages > 1}">
            <ul class="pagination justify-content-center">
                <li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/orders/list(page=${currentPage - 1})}">上一页</a>
                </li>
                <li class="page-item" th:each="page : ${#numbers.sequence(1, totalPages)}"
                    th:classappend="${page == currentPage ? 'active' : ''}">
                    <a class="page-link" th:href="@{/orders/list(page=${page})}" th:text="${page}">1</a>
                </li>
                <li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
                    <a class="page-link" th:href="@{/orders/list(page=${currentPage + 1})}">下一页</a>
                </li>
            </ul>
        </nav>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 状态筛选功能
        document.querySelectorAll('.filter-btn').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有按钮的active类
                document.querySelectorAll('.filter-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 添加当前按钮的active类
                this.classList.add('active');
                
                // 获取选中的状态
                const selectedStatus = this.getAttribute('data-status');
                
                // 筛选订单
                const orderCards = document.querySelectorAll('.order-card');
                orderCards.forEach(card => {
                    const orderStatus = card.getAttribute('data-status');
                    if (selectedStatus === 'all' || orderStatus === selectedStatus) {
                        card.style.display = '';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });

        // 搜索功能
        $('#searchInput').on('input', function() {
            const searchText = $(this).val().toLowerCase();
            filterOrders($('.filter-btn.active').data('status'), searchText);
        });

        // 筛选订单
        function filterOrders(status, searchText = '') {
            $('.order-card').each(function() {
                const orderStatus = $(this).find('.status-badge').text().toLowerCase();
                const orderContent = $(this).text().toLowerCase();
                const statusMatch = status === 'all' || orderStatus === status;
                const searchMatch = !searchText || orderContent.includes(searchText);
                $(this).toggle(statusMatch && searchMatch);
            });
        }

        // 取消订单
        function cancelOrder(orderId) {
            if (confirm('确定要取消该订单吗？')) {
                fetch(`/api/orders/${orderId}/cancel`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert(data.message || '取消失败，请重试');
                    }
                })
                .catch(error => {
                    alert('系统错误，请重试');
                    console.error('Error:', error);
                });
            }
        }

        // 显示评价模态框
        function showRatingModal(btn) {
            const orderId = btn.getAttribute('data-order-id');
            document.getElementById('orderId').value = orderId;
            const modal = new bootstrap.Modal(document.getElementById('ratingModal'));
            modal.show();
        }

        // 星级评分交互
        document.querySelectorAll('.rating i').forEach(star => {
            star.addEventListener('mouseover', function() {
                const rating = this.getAttribute('data-rating');
                updateStars(rating);
            });

            star.addEventListener('click', function() {
                const rating = this.getAttribute('data-rating');
                document.getElementById('rating').value = rating;
                updateStars(rating);
            });

            star.addEventListener('mouseout', function() {
                const rating = document.getElementById('rating').value;
                updateStars(rating);
            });
        });

        function updateStars(rating) {
            document.querySelectorAll('.rating i').forEach(s => {
                const starRating = s.getAttribute('data-rating');
                if (starRating <= rating) {
                    s.classList.remove('far');
                    s.classList.add('fas', 'text-warning');
                } else {
                    s.classList.remove('fas', 'text-warning');
                    s.classList.add('far');
                }
            });
        }

        // 提交评价
        function submitRating() {
            const formData = new FormData(document.getElementById('ratingForm'));
            
            fetch('/orders/rate', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(result => {
                if (result.includes('success')) {
                    const modal = bootstrap.Modal.getInstance(document.getElementById('ratingModal'));
                    modal.hide();
                    alert('评价成功！');
                    location.reload();
                } else {
                    alert('评价失败：' + result);
                }
            })
            .catch(error => {
                alert('系统错误，请稍后重试');
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html> 